<template>
  <section class="">
    <div class="text-center services-text">OUR SERVICES</div>
    <div class="flex flex-wrap gap-8 mx-auto" style="width: 1366px">
      <div
        v-for="(item, index) in imagePaths"
        :key="index"
        class="bg-cover bg-center services-img"
        :style="{ backgroundImage: `url(${item.path})` }"
      >
        <div class="overlay">
          <div class="text-center services-img-text">Plastic Injection Molding</div>
          <div class="flex justify-center mt-48">
            <button class="learn-more-button" @click="toLink(item.link)">Learn more</button>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()


const urlPaths = [
  '/plastic-injection-molding',
  '/rapid-tooling',
  '/cnc-machining',
  '/compression-molding'
]

const images = import.meta.glob('/src/images/home/OUR-SERVICES-*.webp', { eager: true })

const imagePaths = Object.entries(images).map(([key, value], index) => ({
  path: value.default || value, // 对应导入的图片路径
  name: key.split('/').pop(),// 提取文件名
  link: urlPaths[index] || ''
}))

const toLink = (link) => {
  // vue-router路由跳转
  router.push({ path: link })
}
</script>

<style scoped>
.services-text {
  font-size: 2.125rem;
  font-weight: 700;
  margin: 90px 0 20px 0;
  color: #474747;
}

.services-img-text {
  font-size: 2.5rem;
  font-weight: 700;
  color: #ffffff;
}

.services-img {
  width: 667px;
  height: 375px;
}

.overlay {
  padding: 40px 20px 40px 20px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.22);
}

.learn-more-button {
  color: #ffffff;
  border: #ffffff solid 1px;
  font-size: 16px;
  padding: 8px 26px;
}
</style>
